<template>
  <div class="order-list-bg">
    <el-card class="order-list-card">
      <div class="order-list-header">
        <div class="header-left">
          <el-radio-group v-model="role" size="small">
            <el-radio-button label="passenger">我的订单</el-radio-button>
            <el-radio-button label="driver">司机待接单</el-radio-button>
          </el-radio-group>
        </div>
        <div class="header-right">
          <el-button v-if="role === 'passenger'" type="primary" @click="goCreateOrder">创建订单</el-button>
          <el-button @click="fetchOrders" :loading="loading" icon="Refresh">刷新</el-button>
          <el-button @click="goHome">返回首页</el-button>
        </div>
      </div>
      <el-table :data="orders" style="width: 100%" @row-click="goDetail">
        <el-table-column prop="order_number" label="订单编号" width="140" />
        <el-table-column prop="start_address" label="起点" />
        <el-table-column prop="end_address" label="终点" />
        <el-table-column prop="order_status" label="状态" :formatter="formatStatus" />
        <el-table-column prop="order_amount" label="金额" width="80" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onActivated } from 'vue'
import { http } from '../utils/request'
import { useRouter, useRoute } from 'vue-router'
import { passengerOrderAPI, driverOrderAPI } from '@/api/order'

const router = useRouter()
const route = useRoute()
const role = ref('passenger')
const orders = ref([])
const loading = ref(false)

function fetchOrders() {
  loading.value = true
  const userid = localStorage.getItem('userid')
  if (role.value === 'passenger') {
    passengerOrderAPI.getPassengerOrders(userid).then(res => {
      console.log('乘客订单列表:', res) // 调试信息
      orders.value = res.data.data || []
    }).finally(() => {
      loading.value = false
    })
  } else {
    driverOrderAPI.getDriverOrders(userid).then(res => {
      console.log('司机订单列表:', res) // 调试信息
      orders.value = res.data.data || []
    }).finally(() => {
      loading.value = false
    })
  }
}

function goDetail(row) {
  router.push(`/order/detail/${row.id}`)
}

function goHome() {
  router.push('/')
}

function goCreateOrder() {
  router.push('/order/create')
}

function formatStatus(row) {
  const map = {
    0: '待接单', 1: '已上车', 2: '已到达', 3: '待支付', 4: '已支付', 5: '已取消', 6: '待评价', 7: '已评价'
  }
  return map[row.order_status] || '--'
}

watch(role, fetchOrders)
onMounted(fetchOrders)
onActivated(fetchOrders)  // 页面激活时重新获取数据

// 监听路由变化，当返回到订单列表页面时重新获取数据
watch(() => route.path, (newPath) => {
  if (newPath === '/order/list') {
    console.log('返回订单列表页面，重新获取数据')
    fetchOrders()
  }
})
</script>

<style scoped>
.order-list-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.order-list-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>') no-repeat center center;
  background-size: cover;
  opacity: 0.3;
}
.order-list-card {
  width: 800px;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(34,34,34,0.08);
  padding: 32px 36px 24px 36px;
  position: relative;
}
.order-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  gap: 8px;
}
</style> 